import "./App.scss";
import React from 'react';
import { Layout,Icon } from "antd";
import { HashRouter } from "react-router-dom";
import { connect } from "react-redux";
import NavMenu from "./components/menu";
import HeaderTool from "./components/headers";

import { getEarth,siderState } from "./action/earthAction";

const { Header,Sider,Content } = Layout;

class App extends React.Component {
    componentDidMount(){
        console.log("开始加载");
        this.props.getEarth();
    }

    toggle = () => {
        this.props.siderState(this.props.collapsed)
    };

    render(){
        return (
            <HashRouter>
                <Layout id="components-layout-demo-custom-trigger">
                    <Sider trigger={null} collapsible collapsed={this.props.collapsed}>
                        <div className="logo"/>
                        <NavMenu/>
                    </Sider>
                    <Layout>
                        <Header style={{ background : '#fff',padding : 0 }}>
                            <Icon className="trigger" type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                                  onClick={this.toggle}/>
                            <HeaderTool/>
                        </Header>
                        <Content style={{ margin : '24px 16px',padding : 24,background : '#fff',minHeight : 280 }}>
                            <div id="cesiumContainer" />
                                {/*<div id="slider"/>*/}
                        </Content>
                    </Layout>
                </Layout>
            </HashRouter>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer,
    collapsed : state.App.collapsed
});


export default connect(mapStateToProps,{ getEarth,siderState })(App);